<script setup lang="ts">
    import { ref, onMounted, watch } from 'vue'
    import { useRouter } from 'vue-router'
    import { showImagePreview } from 'vant'
    import { techListAPIRes } from '@/api'
    import { useLocation } from '@/store/location'

    const router = useRouter()
    const userStore = useLocation()
    const active = ref(0)
    const currentPage = ref(1)
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)
    const keywords = ref('')
    const listData = ref<any>([])
    const showPicker = ref(false)
    const fieldValue = ref(userStore.city)
    const areaList = [
      { text: '绵阳市', value: '绵阳市' }
    ]

    const onLoad = async () => {
        loading.value = true
        const obj = {
            page: currentPage.value,
            keywords: keywords.value,
            status: active.value,
            settledCity: fieldValue.value,
            location: userStore.location
        }
        const { data } = await techListAPIRes(obj)
        if (refreshing.value) {
            listData.value = []
            refreshing.value = false
        }
        data.list.forEach((item: any) => {
            listData.value.push(item)
        })
        loading.value = false
        if (listData.value.length >= data.total) {
            finished.value = true
            currentPage.value = 1
        }
    }
    const onRefresh = () => {
        currentPage.value = 1
        listData.value = []
        finished.value = false
        refreshing.value = true
        loading.value = true
        onLoad()
    }
    // 加载下一页
    const nextPage = () => {
        loading.value = false
        currentPage.value += 1
        onLoad()
    }
    const onSearch = () => {
        currentPage.value = 1
        listData.value = []
        finished.value = false
        loading.value = true
        onLoad()
    }
    const onToDetail = (id: number) => {
        router.push({
            path: '/tech/datail',
            query: { id }
        })
    }
    const onConfirm = (item: any) => {
      showPicker.value = false
      fieldValue.value = item.selectedValues[0]
      userStore.setCity(item.selectedValues[0])
      onSearch()
    }

    watch([() => userStore.location, userStore.city], () => {
        fieldValue.value = userStore.city
        onLoad()
    })
    onMounted(() => {
        onLoad()
    })
</script>

<template>
    <van-sticky>
        <form action="/">
            <van-search v-model="keywords" shape="round" placeholder="请输入理疗师名称" @search="onSearch" @clear="onSearch">
                <template #left>
                    <div @click="showPicker = true">
                        <van-icon name="location" color="#7C6186" :size="16" />
                        <span class="text-sm text-[#232a24]">{{ fieldValue }}</span>
                        <van-icon name="arrow-down" class="mr-2.5" />
                    </div>
                </template>
            </van-search>
        </form>
        <van-tabs v-model:active="active" color="#7C6186" @change="onSearch">
            <van-tab title="全部" />
            <van-tab title="可服务" />
            <van-tab title="服务中" />
            <van-tab title="休息中" />
        </van-tabs>
    </van-sticky>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="pt-2.5">
        <van-list v-if="listData.length > 0" v-model:loading="loading" :finished="finished" @load="nextPage">
            <van-cell-group v-for="item in listData" :key="item.id" inset class="p-2.5 mb-2.5 mx-3" @click="onToDetail(item.id)">
                <div class="flex items-center">
                    <van-image
                        round
                        width="3.5rem"
                        height="3.5rem"
                        fit="cover"
                        :src="item.avatar"
                        @click.stop="showImagePreview(item.avatar.split(','))"
                    />
                    <div class="flex-1 ml-2">
                        <div class="flex items-center justify-between">
                            <span class="text-base font-bold text-[#232a24]">{{ item.nickname }}</span>
                            <div class="flex-1 flex items-center px-3">
                                <van-tag color="#7C6186" @click.stop="showImagePreview(item.imgs.split(','))">相册</van-tag>
                            </div>
                            <div class="flex items-center">
                                <van-icon name="location" color="#7C6186" size="16" />
                                <span class="text-xs text-[#232a24] ml-0.5">{{ item.distance < 1000 ?  `${item.distance}m` : `${(item.distance / 2 / 500).toFixed(2)}km` }}</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between mt-1">
                            <div class="flex items-center mr-3">
                                <van-icon name="star" color="#7C6186" size="16" />
                                <span class="text-xs text-[#232a24] ml-0.5">5.0</span>
                            </div>
                            <span class="text-xs text-[#333]">单量:{{ item.orderCount < 100 ? item.orderCount : '99+' }}</span>
                            <span class="text-xs text-[#333]">收藏:{{ item.collectCount < 100 ? item.collectCount : '99+' }}</span>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <van-tag v-if="item.status == 1" round color="#7C6186" class="block text-center w-[3.5rem]">可服务</van-tag>
                    <van-tag v-if="item.status == 2" round type="warning" class="block text-center w-[3.5rem]">服务中</van-tag>
                    <van-tag v-if="item.status == 3" round color="#999" class="block text-center w-[3.5rem]">休息中</van-tag>
                    <div class="flex-1 ml-2">
                        <div class="flex items-center">
                            <van-icon name="shield-o" color="#7C6186" size="16" />
                            <span class="text-xs text-[#7C6186] ml-0.5">平台认证</span>
                        </div>
                    </div>
                    <van-button color="#7C6186" size="mini" :disabled="item.status != 1">立即下单</van-button>
                </div>
            </van-cell-group>
        </van-list>
        <van-empty v-else image-size="100" description="暂无数据" />
    </van-pull-refresh>
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
            :columns="areaList"
            @cancel="showPicker = false"
            @confirm="onConfirm"
        />
    </van-popup>
</template>